<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="login()">POST /login</button>
    <button onclick="getPosts()">GET /posts</button>
    <button onclick="getPostsById(2)">GET /posts/:id</button>

    <button onclick="addPostsJSON()">(JOSN) POST /posts</button>
    <button onclick="updatePostsById(1)">(JOSN) PATCH /posts/:id</button>
    <button onclick="deletePostsById(1)">DELETE /posts/:id</button>

    <script>
      let token = ""; //保存令牌

      function login() {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", `http://127.0.0.1:3008/login`);
        xhr.responseType = "json";
        xhr.onload = function () {
          token = xhr.response.data;
        };
        xhr.setRequestHeader("Content-Type", " application/json");
        xhr.send(
          JSON.stringify({
            username: "jack",
            password: "123123",
          })
        );
      }
      // query string查询字符串传参
      function getPosts() {
        const q = new URLSearchParams();
        q.append("id_gte", 2);
        q.append("id_lte", 5);
        const qString = q.toString();

        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("GET", `http://127.0.0.1:3008/posts?${qString}`);

        xhr.setRequestHeader("authorization", token);
        xhr.onload = function () {
          if (xhr.status === 401) {
            console.log("请先登录");
            return;
          }
          console.log(xhr.response);
        };
        xhr.send();
      }
      // path 路径传参
      function getPostsById(id) {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("GET", `http://127.0.0.1:3008/posts/${id}`);
        xhr.setRequestHeader("authorization", token);
        xhr.onload = function () {
          if (xhr.status === 401) {
            console.log("请先登录");
            return;
          }
          console.log(xhr.response);
        };
        xhr.send();
      }
      // 报文主体（JOSN）传参
      function addPostsJSON() {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", `http://127.0.0.1:3008/posts`);
        xhr.responseType = "json";
        xhr.setRequestHeader("Content-Type", " application/json");
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send(
          JSON.stringify({
            author: "xiaoming",
            title: "html is good",
          })
        );
      }
      // path 路径传参+报文主体（JOSN）传参
      function updatePostsById(id) {
        const xhr = new XMLHttpRequest();
        xhr.open("PATCH", `http://127.0.0.1:3008/posts/${id}`);

        xhr.responseType = "json";
        xhr.setRequestHeader("Content-Type", " application/json");

        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send(
          JSON.stringify({
            title: "hello this is for you",
          })
        );
      }
      // path 路径传参
      function deletePostsById(id) {
        const xhr = new XMLHttpRequest();
        xhr.open("DELETE", `http://127.0.0.1:3008/posts/${id}`);

        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send();
      }
    </script>
  </body>
</html>
